@charset "UTF-8";
$arrowContent: (
  left: '\e606',
  left-light: '\e604',
  right: '\e607',
  right-light: '\e602',
  up: '\e603',
  up-light: '\e600',
  down: '\e605',
  down-light: '\e601',
);

$triangleContent: (
  left: '\e60a',
  right: '\e608',
  up: '\e609',
  down: '\e60b',
);

// 字体箭头
@mixin arrow(
  $direction: 'right',
  $color: $ft-border-color-df,
  $font-size: $ft-icon-size-sm,
  $icon-size: $ft-icon-size-md,
  $arrow-right: $ft-spacing-h-sm,
  $font-weight: normal,
  $triangle: false,
  $light: false
) {
  position: relative;
  padding-right: $icon-size + $arrow-right;

  &::before {
    @if $triangle {
      content: map-get($triangleContent, $direction);
    } @else {
      @if $light {
        content: map-get($arrowContent, unquote('#{$direction}-light'));
      } @else {
        content: map-get($arrowContent, $direction);
      }
    }
    background-color: transparent;
    text-align: center;
    transition: transform 0.4s;
    font     : {
      family: 'ftui-iconfont';
      size: $font-size;
      weight: $font-weight;
    }
    color: $color;
    position: absolute;
    right: $arrow-right;
    top: 50%;
    display: block;
    line-height: $icon-size;
    margin-top: -$icon-size/2;
    width: $icon-size;
    height: $icon-size;
  }
}

@mixin arrowReserve($deg: -180deg) {
  &::before {
    transform: rotate($deg);
  }
}

// 这个方法是旋转正方形，没有用到字体
@mixin cell-arrow(
  $sideLength: $ft-font-size-sm,
  $borderColor: $ft-border-color-split,
  $rightSpace: $ft-spacing-h-lg,
  $border: 2 * $ft-point
) {
  position: relative;
  padding-right: $rightSpace;
  &::before {
    content: '';
    height: $sideLength;
    width: $sideLength;
    border  : {
      width: $border $border 0 0;
      color: $borderColor;
      style: solid;
    }
    -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
    transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
    position: absolute;
    top: 50%;
    margin-top: -($sideLength + $border)/2;
    right: $rightSpace;
  }
}
